<template>
  <div>
    <a-form :form='form' :labelAlign="'left'" style='max-width: 500px; margin: 40px auto 0;'>
      <!--题目名称-->
      <a-form-item
        label='题目名称'
        :labelCol='labelCol'
        :wrapperCol='wrapperCol'>
        <a-input placeholder='请输入题目名称'
                 ref='firstInput'
                 v-decorator="['title', { rules: [{required: true, message: '题目名称不能为空'}] }]" />
      </a-form-item>
      
      <!--出题人基本信息展示-->
      <a-form-item
        label='出题人信息'
        :labelCol='labelCol'
        :wrapperCol='wrapperCol'>
        <a-descriptions bordered>
          <a-descriptions-item label='姓名' :span='3'>
            {{ $store.state.user.name || '获取姓名失败'}}
          </a-descriptions-item>
          <a-descriptions-item label='学号'>
            {{ $store.state.user.info.studentId || '获取学号失败'}}
          </a-descriptions-item>
          
        </a-descriptions>
      </a-form-item>
      
      <!--难度标签设置-->
      <a-form-item
        label='难度标签'
        :labelCol='labelCol'
        :wrapperCol='wrapperCol'>
        <a-select
          placeholder='请选择题目的难度标签'
          v-decorator="['level', { rules: [{required: true, message: '难度标签为必填'}]}]">
          <a-select-option value='0'>简单</a-select-option>
          <a-select-option value='1'>中等</a-select-option>
          <a-select-option value='2'>困难</a-select-option>
        </a-select>
      </a-form-item>
      
      
      <!--标签设置-->
      <a-form-item label='题目标签'
                   :labelCol='labelCol'
                   :wrapperCol='wrapperCol'>
        <template v-for='(tag, index) in tags'>
          
          <a-tooltip v-if='tag.length > 20' :key='tag' :title='tag'>
            <a-tag class='tags-list' :key='tag' :closable='index !== 0' @close='() => handleClose(tag)'>
              {{ `${tag.slice(0, 20)}...` }}
            </a-tag>
          </a-tooltip>
          
          <a-tag class='tags-list' v-else :key='tag' :closable='index !== 0' @close='() => handleClose(tag)'>
            {{ tag }}
          </a-tag>
        
        </template>
        <a-input
          v-if='inputVisible'
          ref='input'
          type='text'
          :style="{ width: '78px' }"
          :value='inputValue'
          @change='handleInputChange'
          @blur='handleInputConfirm'
          @keyup.enter='handleInputConfirm'
        />
        <a-tag v-else class='new-tags-button' @click='showInput'>
          <a-icon type='plus' />
          新增标签
        </a-tag>
      </a-form-item>
      
      <a-form-item
        label='分值'
        :labelCol='labelCol'
        :wrapperCol='wrapperCol'
      >
        <a-input placeholder='填写分值(默认10分)'
                 v-decorator="['score', { initialValue: 10, rules: [{required: true, message: '分值必须填写'}] }]">
        </a-input>
      </a-form-item>
    
    </a-form>
    
    
    <a-divider>
      <a-popover>
        <template slot='content'>
          <a-icon type='warning' theme='twoTone' two-tone-color='#eb2f96' />
          必填项
        </template>
        <h2 style='text-align: center;cursor: pointer'>设置题目详细信息
          <a-icon type='save' />
        </h2>
      </a-popover>
    </a-divider>
    <!--markdown编辑器 => topicDetailed-->
    <MavonEditor @getMarkDownContext='getMarkDownContext' :markdown-content='detail' />
    
    
    <a-divider>
      <a-popover style='margin-top: 20px;'>
        <template slot='content'>
          <a-icon type='warning' theme='twoTone' two-tone-color='#eb2f96' />
          必填项
        </template>
        <h2 style='text-align: center;cursor: pointer'>设置答题模板
          <a-icon type='form' />
        </h2>
      </a-popover>
    </a-divider>
    <!--代码模板 python/java/c/c++/js => codeTemplate -->
    <BaseIDE @getCodeAnswer='getCodeAnswer' :code-template='codeTemplate' />
    
    <!--下一步的按钮-->
    <a-divider/>
    <a-form-item :wrapperCol='{span: 19, offset: 11}'>
      <a-button type='primary' @click='nextStep'>下一步</a-button>
    </a-form-item>
    
    <div class='step-form-style-desc'>
      <a-divider orientation='left'>题目设置说明</a-divider>
      题目描述：清晰地描述问题的背景、目标和要求。确保题目简洁明了，让读者能够快速理解。<br /><br />
      输入格式：说明输入数据的形式和结构。例如，给出输入数据的示例或详细描述每个输入参数的含义。<br /><br />
      输出格式：详细说明输出的格式和结构。给出输出示例或描述每个输出参数的含义。<br /><br />
      算法/方法：简要说明解决问题所需要的方法或算法。如果允许使用多种方法，可列出不同的解题思路。<br /><br />
      代码要求：说明对提交的代码有哪些要求，例如编程语言、代码风格等。<br /><br />
      测试数据：给出一些测试数据，以便提交者验证自己的代码是否正确。<br /><br />
      评分标准：如果存在多个提交者，需要说明评分标准和评价代码质量的依据。<br /><br />
      截止日期：说明题目截止提交的时间，以便参与者了解何时结束解题。<br /><br />
      例子：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 给出一些简单的例子，让参与者更好地理解题目。<br /><br />
      版权问题：说明使用或引用其他人的代码或资源时的版权问题。<br /><br />
      其他注意事项：根据实际情况，可以添加其他注意事项，例如是否可以团队协作、是否可以使用特定库等。<br /><br />
    </div>
  </div>
</template>

<script>
import MavonEditor from '@/components/Editor/MavonEditor.vue'
import BaseIDE from '@/views/reply/components/BaseIDE.vue'

export default {
  components: {
    MavonEditor,
    BaseIDE
  },
  name: 'Step1',
  data() {
    return {
      // 创建表单
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this),
      
      
      // 存放标签的数组
      tags: [],
      // 存放题目详细信息(markdown)
      detail: '# CTRL + Backspace 清空所有\n ' +
        '\n # 最底部有题目设置说明 \n' +
        '> 1. 点击编辑器最右边"问号"查看markdown语法\n' +
        '> 2. 其余按钮请自行研究 \n' +
        '# 题目示例如下\n' +
        '\n 给定一个整数数组 `nums` 和一个整数目标值 `target`，请你在该数组中找出 **和为目标值** `target`  的那**两个** 整数，并返回它们的数组下标。\n' +
        '\n' +
        '你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。\n' +
        '\n #### 示例1 \n' +
        '你可以按任意顺序返回答案。\n > 输入：nums = [2,7,11,15], target = 9\n' +
        '输出：[0,1]\n' +
        '解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1] 。' +
        '\n #### 示例 2：\n' +
        '\n' +
        '输入：nums = [3,2,4], target = 6\n' +
        '输出：[1,2]\n' +
        '\n #### 示例 3：\n' +
        '\n' +
        '输入：nums = [3,3], target = 6\n' +
        '输出：[0,1]' +
        '\n' +
        '\n' +
        '**提示：**\n' +
        '`2 <= nums.length <= 104`\n' +
        '`-109 <= nums[i] <= 109`\n' +
        ' `-109 <= target <= 109`\n' +
        '**只会存在一个有效答案**\n',
      // 存放代码模板
      codeTemplate: `# 代码模板示例 (ctrl+A全选+Backspace进行删除)

class Solution:
    def twoSum(self, nums: List[int], target: int) -> List[int]:`,
      // 标签输入框是否展示
      inputVisible: false,
      // 标签输入框的值
      inputValue: ''
    }
  },
  created() {
    // 获取用户信息
  },
  mounted() {
    // 在页面加载完成后，将焦点设置到输入框
    this.getFirstInputFocus();
  },
  methods: {
    nextStep() {
      const { form: { validateFields } } = this
      // 先校验，通过表单校验后，才进入下一步
      validateFields((err, values) => {
        this.getFirstInputFocus();
        // 1. 判断代码模板和markdown编辑器是否有内容
        if (this.tags.length === 0) {
          this.openNotificationWithIcon('waring', '警告', '题目标签个数至少为一个(如"python"')
        }
        
        // 2. 判断表单是否填完整
        if (!err) {
          // values 为所填的内容 => 添加 tags codeTemplate topicDetailed属性
          values.tags = this.tags
          values.topicDetailed = this.detail
          values.codeTemplate = this.codeTemplate
          console.log(values)
          // 将数据传递给父组件
          this.$emit('nextStep', values)
        }
      })
    },
  
    // 得到子组件传递过来的题目详细信息
    getMarkDownContext(topicDetailed){
      this.detail = topicDetailed
    },
    getCodeAnswer(codeTemplate){
      this.codeTemplate = codeTemplate;
    },
    
    // 删除标签
    handleClose(removedTag) {
      this.tags = this.tags.filter(tag => tag !== removedTag)
    },
    // 展示添加标签输入框
    showInput() {
      this.inputVisible = true
      // 获取焦点
      this.$nextTick(function() {
        this.$refs.input.focus()
      })
    },
    
    handleInputChange(e) {
      this.inputValue = e.target.value
    },
    // 焦点消失或按下回车后进行添加
    handleInputConfirm() {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue.length >= 10) {
        this.inputVisible = false
        this.openNotificationWithIcon('waring', '警告', '单个标签的长度不能超过10')
        return
      }
      if (tags.length >= 5) {
        this.inputVisible = false
        this.openNotificationWithIcon('waring', '警告', '题目标签不能超过5个')
        return
      }
      // 判断输入的元素是否已经存在
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: ''
      })
    },
    
    getFirstInputFocus(){
      this.$nextTick(() => {
        this.$refs.firstInput.focus()
      })
    },
    
    openNotificationWithIcon(type, message, description) {
      this.$notification['warning']({
        message,
        description
      })
    }
  }
}
</script>

<style lang='less' scoped>
.step-form-style-desc {
  margin-top: 150px;
  font-size: 15px;
  font-weight: bold;
  padding: 0 56px;
  color: rgba(0, 0, 0, .45);
  
  h3 {
    margin: 0 0 12px;
    font-weight: bold;
    color: rgba(0, 0, 0, .45);
    font-size: 16px;
    line-height: 32px;
  }
  
  h4 {
    margin: 0 0 4px;
    color: rgba(0, 0, 0, .45);
    font-size: 14px;
    line-height: 22px;
  }
  
  p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 22px;
  }
}

.tags-list {
  background-color: #f2f3f4;
  cursor: pointer;
  color: #85858a;
  border: none;
  padding: 5px;
  border-radius: 10px;
}

.new-tags-button {
  background-color: #f2f3f4;
  cursor: pointer;
  color: #7d7def;
  border: none;
  padding: 5px;
  border-radius: 10px;
}

/deep/ .CodeMirror {
  height: 200px;
  width: 100%;
}

</style>
